<template>
  <div class="components-header base-section">
    <div class="header-time">
      <el-form
        :inline="true"
        @submit.prevent
      >
        <el-form-item
          :label="$t('dataAnalysis.statisticalTime') + ':'"
          style="margin-bottom: 0;"
        >
          <div class="title-right">
            <el-select
              v-model="dateValue"
              style="width:100px;"
              @change="setDateRange(dateValue)"
            >
              <el-option
                v-for="item in dateOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <span
              v-if="dateValue === 1"
              class="title-time"
            >{{ nowDate }}</span>
            <button
              v-if="dateValue === 1"
              data-v-3baf97fc
              class="el-button el-button--text el-button--small"
              type="button"
              @click="flushDateTime"
            >
              {{ $t('dataAnalysis.refresh') }}
            </button>
            <span
              v-if="dateValue === 2 || dateValue === 3"
              class="title-time"
            >{{ dateRange[0] }}{{ $t('date.tip') }}{{ dateRange[1] }}</span>
            <div
              v-if="dateValue === 4"
              class="title-picker"
            >
              <el-date-picker
                v-if="dateValue === 4"
                v-model="dateRange[0]"
                style="width: 150px;"
                type="date"
                :placeholder="$t('dataAnalysis.selectDate')"
                :disabled-date="onDateDisabled"
                :picker-options="PickerOptions"
                @change="handleRangeFour()"
              />
            </div>
            <div
              v-if="dateValue === 5"
              class="title-picker"
            >
              <el-date-picker
                v-model="preMonth"
                style="width: 150px;"
                type="month"
                :placeholder="$t('dataAnalysis.selectMonth')"
                :picker-options="monthPickerOptions"
                @change="handleMonth()"
              />
            </div>
          </div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import moment from 'moment'

const emit = defineEmits(['timeData'])

const monthPickerOptions = {
  disabledDate (time) {
    const month1 = moment().startOf('month')
    return (
      time.getTime() > month1.valueOf()
    )
  }
}
const PickerOptions = {
  disabledDate (time) {
    const date = moment().add(-1, 'days').startOf('days')
    return (
      time.getTime() > date.valueOf()
    )
  }
}
const dateOptions = [
  {
    label: $t('dataAnalysis.todayRealTime'),
    value: 1
  },
  {
    label: $t('dataAnalysis.nearly7'),
    value: 2
  },
  {
    label: $t('dataAnalysis.nearly30'),
    value: 3
  },
  {
    label: $t('dataAnalysis.naturalDay'),
    value: 4
  },
  {
    label: $t('dataAnalysis.naturalMonth'),
    value: 5
  }
]

onMounted(() => {
  flushDateTime()
  setDateRange(2)
})

/**
 * 每次改变时间范围，把时间范围的值传给父组件
 */
const timeData = reactive({}) // 传给父级，请求接口所需的时间参数

const emitSuperior = () => {
  emit('timeData', timeData)
}
/**
 * 刷新时间
 */
const dateValue = ref(1) // 商品整体概况,时间选择状态
const dateRange = ref([])
const nowDate = ref(null)
let dateRange1 = []
const flushDateTime = () => {
  const date = moment()
  nowDate.value = date.format('LL')
  dateRange1 = [moment(date).startOf('days').format('LL'), nowDate.value]
  timeData.dateValue = dateValue.value
  timeData.dateRange = dateRange1
  emitSuperior()
}
// 对可选日进行判断
const onDateDisabled = (time) => {
  return time.getTime() > moment().add(-1, 'days').valueOf() // 之后不可选
}
/**
 * 1:今天 2: 近七天 3:近30天 4:昨天 5:自然月(前一个月如当前月为7月，自然月为6月)
 */
const preMonth = ref(null)
let startDay = null
let endDay = null
const setDateRange = (val) => {
  dateValue.value = val
  if (val === 1) {
    dateRange1 = [moment().startOf('days').format('LL'), nowDate.value]
    timeData.dateValue = dateValue.value
    timeData.dateRange = dateRange1
    emitSuperior()
    return
  } else if (val === 2) {
    startDay = -7
    endDay = -1
  } else if (val === 3) {
    startDay = -30
    endDay = -1
  } else if (val === 4) {
    startDay = -1
    endDay = -1
  } else if (val === 5) {
    preMonth.value = getPreMonth(moment().add(-1, 'days'))
    return
  } else {
    return
  }
  // 开始时间
  const startTime = moment().add(startDay, 'days').startOf('days')
  // 结束时间
  const endTime = moment().add(endDay, 'days').endOf('days')
  dateRange.value = [startTime.format('L'), endTime.format('L')]
  dateRange1 = [startTime.format('LL'), endTime.format('LL')]
  // 把时间参数传到父组件
  timeData.dateValue = dateValue.value
  timeData.dateRange = dateRange1
  emitSuperior()
}
/**
 * 当dateRange == 4 监听dateRange[0]的变化
 */
const handleRangeFour = () => {
  if (dateRange.value[0]) {
    const start = moment(dateRange.value[0]).startOf('days')
    dateRange1 = [start.format('LL'), moment(start).endOf('days').format('LL')]
  } else {
    dateRange1 = ['1971-01-01 00:00:00', '1971-01-01 00:00:00']
  }
  // 把时间参数传到父组件
  timeData.dateValue = dateValue.value
  timeData.dateRange = dateRange1
  emitSuperior()
}
/**
 * 当dateRange == 5 监听dateRange[0]的变化
 */
const handleMonth = () => {
  if (preMonth.value) {
    getPreMonth(preMonth.value)
  } else {
    dateRange1 = ['1971-01-01 00:00:00', '1971-01-01 00:00:00']
    // 把时间参数传到父组件
    timeData.dateValue = dateValue.value
    timeData.dateRange = dateRange1
    emitSuperior()
  }
  getProdSurvey()
}
/**
 * 获取前一个月的时间
 */
const getPreMonth = (date) => {
  if (!date) {
    date = new Date()
  }
  // 月的开始时间
  const timeStar = moment(date).startOf('month').format('LL')
  // 月的结束时间
  const timeEnd = moment(date).endOf('month').format('LL')
  dateRange1 = [timeStar, timeEnd]
  // 把时间参数传到父组件
  timeData.dateValue = dateValue.value
  timeData.dateRange = dateRange1
  emitSuperior()
  return moment(date).format('L')
}
/**
 * 获取商品概况数据
 */
const getProdSurvey = () => {
  http({
    url: http.adornUrl('/admin/prodAnalysis/getProdSurvey'),
    method: 'get',
    params: http.adornParams(
      {
        shopId: null,
        dateType: dateValue.value,
        startTime: dateRange1[0],
        endTime: dateRange1[1]
      }
    )
  })
}

</script>

<style lang="scss" scoped>

.components-header {
  padding: 15px 20px;
  .header-time {
    display: inline-block;
    margin-right: 10px;
  }

  .title-right {
    text-align: right;
    display: inline;
  }

  .title-picker {
    display: inline;
  }

  .title-time {
    padding-left: 8px;
    color: #999999;
  }

}
</style>
